<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 200px;height:200px;background: red;position: absolute;left:100px;top:50px;}

        .sbox{width:80px;height:80px;background:pink;position: absolute;left:100px;top:100px;}
    </style>
</head>
<body style="height:1000px;">
    <div id="box">

        <div class="sbox"></div>

    </div>
</body>
<script>
    var box = document.querySelector("#box");


    box.onclick = function(eve){
        var e = eve || window.event;

        // console.log( e );

        // 相对于事件目标的坐标
        // console.log( e.offsetX, e.offsetY );
        // 事件目标
        // console.log( e.target );

        // 相对于页面的可视区域的坐标
        // console.log( e.clientX, e.clientY )

        // 相对于页面的坐标（包含滚走了的距离）
        // console.log( e.pageX, e.pageY );

        // 相对于显示器的坐标
        // console.log( e.screenX, e.screenY );


        // 获取鼠标的按键（了解）
        // console.log( e.button );
        // console.log( e.buttons );

        // 获取事件类型（不分xxx事件对象）
        // console.log( e.type );

    }

</script>
</html>